<template>
  <view class="elderly-home">
    <!-- 老人信息卡片 -->
    <view class="elderly-info-card">
      <text class="subtitle-text">康养中心养老院-合肥蜀山片区</text>

      <view class="info-header">
        <view class="name-section">
          <text class="label">{{userName}}</text>
          <view class="room-tag">
            <text class="building-icon"><img src="/static/icon/Frame.png" alt=""></text>
            <text class="room-text">康养中心 <text class="room-id">2#1203</text></text>
          </view>
        </view>
        <view class="avatar">
          <image class="avatar-image" src="/static/icon/头像.png" mode="aspectFill" />
        </view>
      </view>

      <view class="demographics">
        <view class="demo-item">
          <view class="demo-header">
            <text class="demo-icon"><img src="/static/icon/Frame(1).png" alt=""></text>
            <text class="demo-text">性别</text>
          </view>
          <text class="demo-value">{{ userInfo.sex === 0 ? '女' : '男' }}</text>
        </view>
        <view class="demo-item">
          <view class="demo-header">
            <text class="demo-icon"><img src="/static/icon/Frame(2).png" alt=""></text>
            <text class="demo-text">年龄</text>
          </view>
          <text class="demo-value">{{calculateAge(userInfo.birthday) || '无'}}</text>
        </view>
        <view class="demo-item">
          <view class="demo-header">
            <text class="demo-icon"><img src="/static/icon/Frame(3).png" alt=""></text>
            <text class="demo-text">联系人/联系方式</text>
          </view>
          <text class="demo-value">王大哥/{{ userInfo.phone || '无' }}</text>

        </view>
      </view>
    </view>

    <!-- 医疗历史信息 -->
    <view class="medical-history">
      <view class="history-item">
        <text class="history-label">婚姻状况</text>
        <text class="history-value">{{ getMaritalStatus(userInfo.marray) || '无' }}</text>

      </view>
      <view class="history-item">
        <text class="history-label">既往病史</text>
        <text class="history-value">{{ userInfo.history || '无' }}</text>
      </view>
      <view class="history-item">
        <text class="history-label">过敏史</text>
        <text class="history-value">{{ userInfo.mi_history || '无' }}</text>

      </view>
    </view>
    <!-- 记录标签页 -->
    <view class="records-section">
      <view class="tabs">
        <view class="tab-indicator-fixed"></view>
        <view class="tab" :class="{ active: activeTab === 'activity' }" @click="switchTab('activity')">
          <text class="tab-text">活动记录</text>
        </view>
        <view class="tab" :class="{ active: activeTab === 'medicine' }" @click="switchTab('medicine')">
          <text class="tab-text">服药记录</text>
        </view>
      </view>

      <!-- 时间线记录 -->
      <view class="timeline" v-if="activeTab === 'activity'">
        <view class="timeline-item" v-for="(record, index) in records" :key="index">
          <view class="timeline-marker">
            <text class="marker-number">{{ getDayFromDate(record.event_time) }}</text>
            <text class="marker-date">{{ getYearMonthFromDate(record.event_time) }}</text>
          </view>
          <view class="timeline-content">
            <view class="record-card">
              <view class="record-header">
                <text class="record-title">{{ record.title }}</text>
                <text class="record-time">{{ getTimeFromDate(record.event_time) }}</text>
              </view>
              <text class="record-description">{{ record.desc }}</text>
              <view class="record-images">
                <view class="image-item" v-for="(img, imgIndex) in [13, 14, 15, 16,]">
                  <image class="record-image" src="/static/icon/image 5036.png" mode="aspectFill" />
                  <!-- <image class="record-image" :src="record.imgurl" mode="aspectFill" /> -->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服药记录 -->
      <view class="medicine-timeline" v-if="activeTab === 'medicine'">
        <view class="medicine-item" v-for="(record, index) in medicineRecords" :key="index">
          <view class="medicine-time">
            <view class="time-dot"></view>
            <text class="time-text">{{ record.event_time }}</text>
          </view>
          <view class="medicine-card">
            <text class="medicine-title">{{ record.title }}</text>
            <text class="medicine-description">{{ record.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  apiGetHomeData, apiGetHomeMedicine
} from '@/request/api.js';
export default {
  name: 'ElderlyHome',
  data() {
    return {
      activeTab: 'activity',
      records: [],
      medicineRecords: [],
      userInfo: {},
      // records: [
      //   {
      //     day: '05',
      //     date: '2025/10',
      //     title: '定时喂药—阿莫西林',
      //     time: '12:24',
      //     description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
      //     images: [1, 2, 3, 4]
      //   },
      //   {
      //     day: '04',
      //     date: '2025/10',
      //     title: '定时喂药—阿莫西林',
      //     time: '12:24',
      //     description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
      //     images: [1, 2, 3, 4]
      //   },
      //   {
      //     day: '03',
      //     date: '2025/10',
      //     title: '定时喂药—阿莫西林',
      //     time: '12:24',
      //     description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
      //     images: [1, 2, 3, 4]
      //   }
      // ],
      // medicineRecords: [
      //   {
      //     time: '11:00',
      //     title: '布洛芬缓释胶囊',
      //     description: '用药2天，每天1次，每次1粒'
      //   },
      //   {
      //     time: '11:00',
      //     title: '布洛芬缓释胶囊',
      //     description: '用药2天，每天1次，每次1粒'
      //   },
      //   {
      //     time: '11:00',
      //     title: '布洛芬缓释胶囊',
      //     description: '用药2天，每天1次，每次1粒'
      //   },
      //   {
      //     time: '11:00',
      //     title: '布洛芬缓释胶囊',
      //     description: '用药2天，每天1次，每次1粒'
      //   }
      // ]
    }
  },
  onLoad() {
    this.apiGetHomeDataApi()
    this.userInfo = uni.getStorageSync('userInfo');

  },
  computed: {
    // 用户名称
    userName() {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo) {
          // 优先使用昵称，然后是姓名，最后是手机号
          if (userInfo.nickname && userInfo.nickname.trim()) {
            return userInfo.nickname;
          }
          if (userInfo.name && userInfo.name.trim()) {
            return userInfo.name;
          }
          if (userInfo.phone && userInfo.phone.trim()) {
            return `用户${userInfo.phone}`;
          }
        }
        return '用户WTS4.0';
      } catch (e) {
        return '用户WTS4.0';
      }
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
      if (tab === 'medicine') {
        this.apiGetHomeMedicineApi()
      }
    },
    // 活动记录
    async apiGetHomeDataApi() {
      let res = await apiGetHomeData({
        member_id: 1,
        page: 1,
        limit: 10
      })
      this.records = res.list

      console.log(res)
    },
    // 服药记录
    async apiGetHomeMedicineApi() {
      let res = await apiGetHomeMedicine({
        uid: 1,
        page: 1,
        limit: 10
      })
      this.medicineRecords = res.data
      console.log(res)
    },
    // 从日期时间字符串中提取年月格式 (2025/10)
    getYearMonthFromDate(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      return `${year}/${month}`;
    },

    // 从日期时间字符串中提取日 (05)
    getDayFromDate(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      const day = date.getDate();
      return day < 10 ? `0${day}` : day.toString();
    },

    // 从日期时间字符串中提取时间格式 (12:24)
    getTimeFromDate(dateTimeStr) {
      if (!dateTimeStr) return '';
      const date = new Date(dateTimeStr);
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const formattedHours = hours < 10 ? `0${hours}` : hours.toString();
      const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes.toString();
      return `${formattedHours}:${formattedMinutes}`;
    },
    // 计算年龄
		calculateAge(birthday) {
			if (!birthday || birthday === '0000-00-00') return '未知';
			const birth = new Date(birthday);
			const today = new Date();
			let age = today.getFullYear() - birth.getFullYear();
			const monthDiff = today.getMonth() - birth.getMonth();
			if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
				age--;
			}
			return age > 0 ? age.toString() : '未知';
		},
		
		// 获取婚姻状况
		getMaritalStatus(marray) {
			switch (marray) {
				case 1: return '未婚';
				case 2: return '已婚';
				case 3: return '离异';
				case 4: return '丧偶';
				default: return '未知';
			}
		},
		
		// 格式化时间
		formatTime(timeString) {
			if (!timeString) return '';
			const date = new Date(timeString);
			return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
		},

  }
}
</script>

<style scoped>
.elderly-home {
  min-height: 100vh;
  background-color: #ffffff;
  position: relative;
  background: url('/static/home_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 20rpx;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 30rpx;
  background-color: #ffffff;
}

.time {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
}

.status-icons {
  display: flex;
  gap: 10rpx;
}

.icon {
  font-size: 24rpx;
}

/* 页面标题 */
.header {
  padding: 20rpx 30rpx;
  flex-shrink: 0;
  opacity: 0.32;
  background: linear-gradient(0deg, #ffffff29 0%, #ffffff29 100%), linear-gradient(281deg, #FF312B -12.36%, #FFD25F 100%), linear-gradient(180deg, #FFE6A7 -2.13%, #FF993A 35.62%);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #000000;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666666;
  display: block;
}

/* 老人信息卡片 */
.elderly-info-card {
  margin: 0rpx 30rpx;
  border-radius: 20rpx;
  /* padding: 30rpx; */
  position: relative;
}

.subtitle-text {
  font-size: 26rpx;
  color: #666666;
  display: block;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name-section {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.label {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}

.room-tag {
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: linear-gradient(90deg, #ffffff00 0%, #FFF 100%);


  .building-icon {
    font-size: 24rpx;
    color: #ffffff;
  }

  .room-text {
    font-size: 24rpx;
    color: #000d3d;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16rpx;
  }

  .room-id {
    font-family: "Manrope";
    font-size: 24rpx;
    font-style: normal;
    font-weight: 600;
    line-height: 16rpx;
    background: linear-gradient(254deg, #FF4856 11.79%, #FF6F1C 77.16%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}


.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
}

.avatar-image {
  width: 100%;
  height: 100%;
}

/* 人口统计学信息 */
.demographics {
  display: flex;
  gap: 40rpx;
  margin-bottom: 30rpx;
}

.demo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rpx;
}

.demo-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding-right: 20rpx;
  margin-right: 20rpx;
  border-right: 2rpx solid #ffffff;
}

.demo-item:last-child .demo-header {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.demo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rpx;
  height: 20rpx;
}

.demo-icon img {
  width: 20rpx;
  height: 20rpx;
  display: block;
}

.demo-text {
  font-size: 20rpx;
  color: #666666;
  line-height: 20rpx;
  height: 20rpx;
  display: flex;
  align-items: center;
}

.demo-value {
  color: #092235;
  align-self: center;
  font-family: "Manrope";
  font-size: 24rpx;
  font-style: normal;
  font-weight: 600;
  line-height: 20rpx;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

/* 医疗历史信息 */
.medical-history {
  width: 80%;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.history-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.history-label {
  font-size: 24rpx;
  color: #999999;
  font-weight: 400;
}

.history-value {
  font-size: 28rpx;
  color: #000000;
  font-weight: 600;
}



/* 记录部分 */
.records-section {
  padding: 0 30rpx;
  margin-bottom: 120rpx;
}

.tabs {
  display: flex;
  margin-bottom: 30rpx;
  position: relative;
}

.tab {
  /* flex: 1; */
  text-align: left;
  padding: 20rpx 30rpx;
  position: relative;
}

.tab-text {
  font-size: 32rpx;
  color: #999999;
  font-weight: 400;
}

.tab.active .tab-text {
  color: #000000;
  font-weight: 600;
}

.tab-indicator-fixed {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 30rpx;
  width: 6rpx;
  background-color: #FF4444;
  border-radius: 0 3rpx 3rpx 0;
}

/* 时间线 */
.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 56rpx;
  top: 25rpx;
  bottom: 0;
  width: 2rpx;
  background: repeating-linear-gradient(to bottom,
      #ddd 0,
      #ddd 10rpx,
      transparent 10rpx,
      transparent 20rpx);
}

.timeline-item {
  display: flex;
  margin-bottom: 40rpx;
  position: relative;
}

.timeline-marker {
  width: 120rpx;
  text-align: center;
  position: relative;
  z-index: 2;
}

.marker-number {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 50%;
  margin: 0 auto 10rpx;
}

.marker-date {
  font-size: 24rpx;
  color: #999999;
  display: block;
}

.timeline-content {
  flex: 1;
  margin-left: 20rpx;
}

.record-card {
  width: 500rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
}

.record-time {
  font-size: 28rpx;
  color: #999999;
}

.record-description {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
}

.record-images {
  display: flex;
  gap: 10rpx;
  overflow: hidden;
  margin-top: 20rpx;
}

.image-item {
  width: 120rpx;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  overflow: hidden;
}

.record-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-placeholder {
  font-size: 32rpx;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  height: 60rpx;
  /* 限制线条高度不超出第一个时间节点 */
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.nav-icon {
  font-size: 40rpx;
  color: #4D4D4D;
}

.nav-text {
  font-size: 24rpx;
  color: #4D4D4D;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: #FFA500;
}

/* 服药记录样式 */
.medicine-timeline {
  padding: 0 30rpx;
  position: relative;
}

.medicine-timeline::before {
  content: '';
  position: absolute;
  left: 48rpx;
  top: 10rpx;
  bottom: 0;
  width: 2rpx;
  background: repeating-linear-gradient(to bottom,
      #092235 0,
      #092235 10rpx,
      transparent 10rpx,
      transparent 20rpx);
}

.medicine-item {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  gap: 20rpx;
  margin-bottom: 40rpx;
  position: relative;
}

.medicine-time {
  display: flex;
  align-items: center;
  gap: 15rpx;
  position: relative;
  z-index: 3;
  padding: 8rpx 0;
}

.time-dot {
  width: 20rpx;
  height: 20rpx;
  background: #fff;
  border-radius: 50%;
  border: 10rpx solid #FF4444;
  box-shadow: 0 0 0 2rpx #fff;
}

.time-text {
  font-size: 32rpx;
  color: #FF4444;
  font-weight: 600;
}

.medicine-card {
  flex: 1;
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  margin-left: 50rpx;
}

.medicine-title {
  font-size: 36rpx;
  color: #000000;
  font-weight: 600;
  display: block;
  margin-bottom: 12rpx;
}

.medicine-description {
  font-size: 28rpx;
  color: #999999;
  line-height: 1.5;
}
</style>